<template>
    <div class="container">
        <Header />
        <BackBtn />
        <div class="content">
            <van-tabs type="card" animated color="#2c85f3">
                <van-tab title="求职信息">
                    <div class="list">
                        <div class="item" v-for="item in 6" :key="item">
                            <div class="itemLeft">
                                <div class="img">
                                    <img
                                        src=""
                                        alt=""
                                    />
                                </div>
                                <div class="info">
                                    <div class="title">
                                        <h4>周某</h4>
                                        <p>Java工程师</p>
                                    </div>
                                    <div class="date">2021-12-30</div>
                                </div>
                            </div>
                            <div class="itemRight">
                                <button @click="goMyResume">查看</button>
                            </div>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="系统消息">
                    <van-empty description="没有消息" />
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>
import BackBtn from "@/components/BackBtn";
import Header from "@/components/Header";

export default {
    components: {
        BackBtn,
        Header,
    },
    data() {
        return {};
    },
    methods: {
        goMyResume(){
            this.$store.state.isMyResume = false
            this.$router.push('/myresume')
        }
    },
    created() {},
};
</script>

<style lang="less" scoped>
.content {
    padding: 15px 18.5px;
    .list {
        margin-top: 10px;
        padding: 0 18.5px;
        .item {
            padding: 10px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #ddd;
            &:last-child{
                border-bottom: 0;
            }
            .itemLeft {
                display: flex;
                align-items: center;
                .img {
                    width: 38px;
                    height: 38px;
                    margin-right: 10px;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .info {
                    .title {
                        display: flex;
                        align-items: center;
                        h4 {
                            font-size: 14px;
                            font-weight: bold;
                            color: #000000;
                            margin-right: 10px;
                        }
                        p {
                            font-size: 14px;
                            color: #666666;
                        }
                    }
                    .date {
                        margin-top: 7px;
                        font-size: 14px;
                        color: #666666;
                    }
                }
            }
            .itemRight {
                button {
                    font-size: 13px;
                    color: #fff;
                    padding: 5px 15px;
                    background: #2c85f3;
                    border-radius: 25px;
                }
            }
        }
    }
}
</style>